<template>
    <div>
        <h3>发表评论</h3>
        <textarea placeholder="请输入评论内容" v-model.trim="msg"></textarea>
        <mt-button type="primary" size="large"  @click="postcomment">发表评论</mt-button>
        <hr>
        <div class="content-box">
            <div class="content-bar" v-for="(item,i) in commentinfo" :key="item.add_time">
                <div class="content-bar-top">
                    <span>第:{{i+1}}楼</span><span>用户：{{item.user_name}}</span><span>发表时间:{{item.add_time}}</span>
                </div>
                <p class="content-bar-bottom">{{item.content}}</p>
            </div>
        </div>
        <mt-button size="large" plain @click="getmore">加载更多</mt-button>
    </div>
</template>

<script>
import {Toast} from 'mint-ui'
export default {
    data(){
        return{
            pageindex:1,
            commentinfo:[],
            msg:''
        }
    },
    created() {
        this.getcomments()
    },
    methods:{
        getcomments() {
            this.$http.get("api/getcomments/"+this.id+"?pageindex="+this.pageindex+"").then((result)=>{
                if(result.body.status === 0){
                    this.commentinfo = result.body.message
                }else{
                    Toast: {
                        message: '数据加载错误'
                    }
                }
            })
        },
        getmore() {
            this.$http.get("api/getcomments/"+this.id+"?pageindex="+this.pageindex++ +"").then((result)=>{
                this.commentinfo = this.commentinfo.concat(result.body.message)
            })
        },
        postcomment(){
            this.$http.post('api/postcomment/'+this.$route.params.id,{content:this.msg}).then((result)=>{
                if(result.body.status === 0){
                    var cmt = {
                        user_name: "匿名用户",
                        add_time: Date.now(),
                        content: this.msg
                    }
                    this.commentinfo.unshift(cmt);
                    this.msg = ""
                }
            })
        }
    },
    props:['id']
}
</script>

<style lang="less" scoped>
    .content-box{
        .content-bar{
            .content-bar-top{
                font-size: 12px;
                background-color:grey;
            }
        }
    }
</style>

